<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           // $("#addLi").click(function(){
           //     // 方法一:使用内部插入,向标签体末尾插入
           //     let inText = $("#inText").val();
           //     let l = "<li>"+inText+"</li>";
           //     // 在调用jquery函数的时候
           //     // 调用者必须是jquery对象
           //     // 参数可以是jquery对象,也可以是DOM对象
           //     // 此时$("ul")是jquery对象,l是DOM对象
           //     // $("ul").append(l);
           //     // 由于l是一个DOM对象,无法调用jquery函数
           //     // 需要转换
           //     // l.appendTo($("ul"));
           //     $(l).appendTo($("ul"));
           // });
            $("#addLi").click(function(){
                // 方法一:使用外部插入,插入到指定位置,此时是同级标签
                let inText = $("#inText").val();
                let l = "<li>"+inText+"</li>";
                // 插入到指定节点之前
                // $("li:first").before(l);
                // $(l).insertBefore($("li:first"));
                // 插入到指定节点之后
                // $("li:last").after(l);
                $(l).insertAfter($("li:last"));
            });
            $("li").click(function(){
               // let l = "<li>"+$(this).html()+"</li>";
                // 克隆一个与指定元素完全一致的元素
                // 谁调用,就克隆谁
                // 该方式不会克隆事件,只会克隆元素本身
                // let l = $(this).clone();
                // let l = $(this).clone();
                // 克隆,传递参数true
                // 表示克隆元素的同时将元素所对应事件同时克隆
                let l = $(this).clone(true);
               $("ul").append(l);
            });
            $("#clean").click(function(){
               // 清空列表中所有选项
                // 清除指定标签的所有标签体内容
                // 该标签还在
               $("ul").empty();
            });
            $("#remove").click(function(){
                // 删除指定的标签(包含该标签本身与该标签的标签体内容)
                // 删除之后该标签也会被删掉
                $("ul").remove();
            })
        });
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="addLi">追加</button>
<button id="clean">清空</button>
<button id="remove">删除</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>